<!--                                                                      
    Designer   : Renyangang               
                                                                            
    Licensed under the Apache License, Version 2.0 (the "License");         
    you may not use this file except in compliance with the License.        
    You may obtain a copy of the License at                                 
                                                                            
        http://www.apache.org/licenses/LICENSE-2.0                          
                                                                            
    Unless required by applicable law or agreed to in writing, software    
    distributed under the License is distributed on an "AS IS" BASIS,       
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and     
    limitations under the License. 
-->
<template>
    <div class="switch-container">
        <p class="pcb-silkscreen title">Slide Switchs</p>
        <div :class="sw.state?'switch on':'switch'" v-for="sw,idx in switchs.switchs" :key="sw.id" @click="toggleSwitch(idx)">
            <div class="switch-label label-on">ON</div>
            <div class="switch-label label-off">OFF</div>
            <div class="switch-toggle"></div>
            <p>{{ idx+1 }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { switchStore } from '@/stores/switchs';

const switchs = switchStore();

function toggleSwitch(idx: number) {
    switchs.setSwitchValue(idx, !switchs.switchs[idx].state);
}
</script>


<style scoped>
        /* 根容器 */
        .switch-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            gap: 0.5rem;
            padding: 1.8rem 0.3rem 0.8rem 0.3rem;
            background-color: var(--fv-c-black);
            border: 1px solid var(--fv-c-block-shadow);
            border-radius: 8px;
            z-index: 1;
            box-shadow: 0px 0px 1px 1px var(--fv-c-block-shadow);
        }

        .switch-container .title {
            position: absolute;
            top: 0.2rem;
            left: calc(50% - 3rem);
            font-size: 0.8rem;
            line-height: 1.5rem;
            z-index: 50;
        }

        /* 单个开关 */
        .switch {
            position: relative;
            width: 1.2rem;
            height: 3rem;
            background-color: var(--fv-c-btn-disable);
            border-radius: 5px;
            box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s, box-shadow 0.3s;
        }

        .switch p {
            text-align: center;
            margin-top: 3rem;
            color: var(--fv-c-text-white);
            font-size: 0.5rem;
        }

        /* ON 和 OFF 标签 */
        .switch-label {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 0.5rem;
            font-weight: bold;
            color: var(--fv-c-text-black);
            pointer-events: none;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        }

        .label-on {
            top: 5px;
        }

        .label-off {
            bottom: 5px;
        }

        /* 开关按钮 */
        .switch-toggle {
            position: absolute;
            width: 1rem;
            height: 1rem;
            background: linear-gradient(145deg, #ffffff, #e6e6e6);
            border-radius: 3px;
            top: 0.2rem;
            left: 0.1rem;
            transition: top 0.3s ease;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), inset 3px 3px 6px rgba(0, 0, 0, 0.1), inset -3px -3px 6px rgba(255, 255, 255, 0.7);
            overflow: hidden;
        }

        /* 条纹效果 */
        .switch-toggle::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
            background-size: 6px 6px;
            border-radius: 3px;
            pointer-events: none;
        }

        /* 开关状态变化 */
        .switch.on {
            background-color: var(--fv-c-btn-enable);
            box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.4);
        }

        /* 切换时按钮条纹颜色变化 */
        .switch.on .switch-toggle {
            top: 1.8rem;
        }
</style>